<section style="margin: 18px 16px 20px 16px; width: 322px; min-height: 68px;">
    <!-- total width: 354px, total height: 106px -->
    <div style="display:flex;flex-direction: column;flex:1">
        <div style="display: flex; font-size: 12px; align-items: center;">
            <div style="display: flex;align-items: center;">
                <mat-icon [color]="'primary'" style="font-size: 16px; height: 16px; width: 16px;">message</mat-icon>
                <div style="margin-left: 8px">{{'APP_NAME'|translate}}</div>
            </div>
            <div style="margin: 0px 4px">&#183;</div>
            <div>{{'SYSTEM_MESSAGES'|translate}}</div>
            <div style="margin: 0px 4px">&#183;</div>
            <div>{{parsedDate}}</div>
        </div>
        <div style="margin-top: 8px; display: flex; justify-content: space-between; align-items: center;">
            <div style="display: flex; align-items: center;">
                <div style="margin-right: 16px;">
                    <div style="height: 36px; width: 36px; border-radius: 50%; background-color: #673ab7; color: white; line-height: 36px; text-align: center;">
                        S
                    </div>
                </div>
                <div>
                    <div style="font-weight: 700;font-size: 14px; margin-bottom: 2px;">{{value.title | translate}}</div>
                    <div style="justify-content: space-between; align-items: center; font-size: 12px; flex:1; color: rgba(0,0,0,.54);">
                        <ng-container *ngIf="value.title==='SYSTEM_VALIDATION_FAILED'">
                            <div class="max-length">{{value.descriptions[0]|translate}}</div>
                        </ng-container>
                        <ng-container *ngIf="value.title==='NEW_PROJECT_CREATED'">
                            <div class="max-length">
                                {{'NOTIFICATION_PROJECT_NAME'|translate}}:<span
                                    style="padding-left: 4px;">{{value.descriptions[0]}}</span>
                            </div>
                        </ng-container>
                        <div *ngIf="!bypassDefaultNotificationList.includes(value.title)">
                            <div *ngFor="let a of value.descriptions" class="max-length" matTooltip="{{a}}">
                                {{a}}
                            </div>
                        </div>
                        <div *ngIf="value.title==='REJECTED_MSG_EVENT' || value.title==='UNROUTABLE_MSG_EVENT'">
                            <div class="max-length">
                                {{'EVENT_ID'|translate}} : <span>{{value.descriptions[0]}}</span>
                            </div>
                            <div class="max-length">
                                {{'EVENT_TOPIC'|translate}} : <span
                                    matTooltip="{{value.descriptions[1]}}">{{value.descriptions[1]}}</span>
                            </div>
                            <div class="max-length">
                                {{'EVENT_NAME'|translate}} : <span
                                    matTooltip="{{value.descriptions[2]}}">{{value.descriptions[2]|translate}}</span>
                            </div>
                        </div>
                        <div *ngIf="value.title==='JOB_THREAD_STARVING'">
                            <div class="max-length">
                                {{'JOB_NAME'|translate}} : <span>{{value.descriptions[0]|translate}}</span>
                            </div>
                            <div class="max-length">
                                {{'INSTANCE_ID'|translate}} : <span>{{value.descriptions[1]}}</span>
                            </div>
                        </div>
                        <div *ngIf="value.title==='JOB_STARVING'">
                            <div class="max-length">
                                {{'JOB_NAME'|translate}} : <span>{{value.descriptions[0]|translate}}</span>
                            </div>
                        </div>
                        <div *ngIf="value.title==='RAW_ACCESS_RECORD_PROCESSING_WARNING'">
                            <div class="max-length" matTooltip="{{value.descriptions[0]}}">
                                {{'REQUEST_ID'|translate}} : <span>{{value.descriptions[0]}}</span>
                            </div>
                            <div *ngIf="value.descriptions[1]" class="max-length" matTooltip="{{value.descriptions[1]}}">
                                {{'REQUEST_ID'|translate}} : <span>{{value.descriptions[1]}}</span>
                            </div>
                            <div *ngIf="value.descriptions[2]" class="max-length">
                                <ng-container *ngIf="value.descriptions[2]==='CHECK_EVENT_FOR_MORE'">
                                    <span>{{value.descriptions[2]|translate}}</span>
                                </ng-container>
                                <ng-container *ngIf="value.descriptions[2]!=='CHECK_EVENT_FOR_MORE'"
                                    matTooltip="{{value.descriptions[2]}}">
                                    {{'REQUEST_ID'|translate}} : <span>{{value.descriptions[2]}}</span>
                                </ng-container>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <button mat-icon-button style="margin: 0px -8px 0px 8px;">
                <mat-icon [color]="'primary'" (click)="dismissMsg($event)">close</mat-icon>
            </button>
        </div>
    </div>
</section>
<mat-divider *ngIf="length >1 && index!==length-1"></mat-divider>